<template>
	<view class="diy-home-top component-diy" :style="backgroundColor">
		<i @click="goStoreAddress" class="home-map-icon iconfont icon-dingwei" :style="iconMapColor"></i>
		<view class="store-select" @tap="toStoreLocation">
			<view class="uni-input" :style="storeSwitchColor">{{storeList[storeIndex].store_name}}</view>
			<i class="iconfont icon-arrow-down-s-fill" v-if="storeSwitch==1" :style="storeSwitchColor"></i>
		</view>
		<view class="home-search" @click='search' :style="searchBackgroundColor">
			<i class="iconfont icon-search" :style="searchPlaceholderColor"></i>
			<span class="placeholder" :style="searchPlaceholderColor">请输入商品名称</span>
		</view>
		<view class="home-scan-box">
			<i @click='scavenging' class="iconfont icon-un-scan-o" :style="QRCodeColor"></i>
			<i @click='toCard' class="iconfont icon-erweima" :style="memberCardColor"></i>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['componentData', 'storeList', 'index', 'storeSwitch'],
		data() {
			return {
				storeIndex: this.index,
			};
		},
		computed: {
			backgroundColor() {
				return this.getBackgroundColor('backgroundColor');
			},
			searchBackgroundColor() {
				return this.getBackgroundColor('searchBackgroundColor');
			},
			iconMapColor() {
				return this.color('iconMapColor');
			},
			storeSwitchColor() {
				return this.color('storeSwitchColor');
			},
			searchPlaceholderColor() {
				return this.color('searchPlaceholderColor');
			},
			QRCodeColor() {
				return this.color('QRCodeColor');
			},
			memberCardColor() {
				return this.color('memberCardColor');
			}
		},
		methods: {
			toStoreLocation() {
				if (this.storeSwitch == 1) {
					uni.navigateTo({
						url: '/pages/index/storeLocation/storeLocation'
					})
				}
			},
			color(type) {
				const css = {
					'color': this.componentData[type]
				};

				return this.$joinStyle(css);
			},
			getBackgroundColor(type) {
				const css = {
					'background-color': this.componentData[type]
				};
				return this.$joinStyle(css);
			},
			//点击进入门店地图
			goStoreAddress() {
				uni.openLocation({
					longitude: Number(this.storeList[this.storeIndex].longitude),
					latitude: Number(this.storeList[this.storeIndex].latitude),
					name: this.storeList[this.storeIndex].store_name,
					address: this.storeList[this.storeIndex].address
				});
			},
			// 首页点击搜索
			search() {
				uni.navigateTo({
					url: '/pages/product/productList/productList?type=1',
				});
			},
			//扫条形码
			scavenging() {
				uni.scanCode({
					success: async (res) => {
						if (res.errMsg != 'scanCode:ok') return;
						const response = await this.$request('SmallProgramApi/Goods/scavenging_v1', {
							goods_code: res.result
						})
						if (response.status == 1) {
							const goods = response.goods;
							//存在多规格
							if (goods.attribute_state == 2) {
								this.$emit('get-sku', goods);
								//不存在多规格，直接入购物车。
							} else {
								this.$emit('add-to-car', {
									goods_id: goods.goods_id,
									num: 1,
								});
							}
						} else {
							uni.showToast({
								'title': response.msg,
								'icon': 'none'
							});
						}
					}
				})
			},
			//会员卡页面
			toCard() {
				uni.navigateTo({
					url: '/pages/mine/card/card?type=1'
				})
			},
		}
	}
</script>
<style lang="less">
	@font-face {
		font-family: 'iconfont';
		src: url('~@/static/iconfont/iconfont.eot');
		src: url('~@/static/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
			url('~@/static/iconfont/iconfont.woff2') format('woff2'),
			url('~@/static/iconfont/iconfont.woff') format('woff'),
			url('~@/static/iconfont/iconfont.ttf') format('truetype'),
			url('~@/static/iconfont/iconfont.svg#iconfont') format('svg');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-dingwei:before {
		content: "\e63e";
	}

	.icon-arrow-down-s-fill:before {
		content: "\e72b";
	}

	.icon-un-scan-o:before {
		content: "\e6be";
	}

	.icon-search:before {
		content: "\e626";
	}

	.icon-erweima:before {
		content: "\e71e";
	}

	.icon-coupon:before {
		content: "\e606";
	}

	.diy-home-top {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 15px 15px 13px 5px;
		box-sizing: border-box;

		/* #ifndef H5 */
		.home-map-icon {
			font-size: 40rpx;
			color: #FFF;
			margin: 0 20rpx;
		}

		.store-select {
			color: #FFFFFF;
			display: flex;
			align-items: center;

			.uni-input {
				max-width: 150rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin: 0 10rpx 0 0;
				color: white;
				font-size: 30rpx;
				min-width: 140rpx;
			}
		}

		/* #endif */

		/* #ifdef H5 */
		.home-search {
			display: flex;
			height: 28px;
			background-color: white;
			border-radius: 15px;
			padding: 0 10px;
			box-sizing: border-box;
			align-items: center;
			width: 170px;
			margin: 0 5px 0 10px;
			flex: 1;

			.icon-search {
				color: #ccc;
				font-size: 18px;
				margin-top: 3px;
			}

			.placeholder {
				font-size: 14px;
				color: #ccc;
			}

			// >image {
			// 	width: 110px;
			// 	height: 14px;
			// 	margin-right: 7.5px;
			// }
		}

		.home-scan-box {
			display: flex;
			align-items: center;

			.iconfont {
				color: #FFF;
				margin-left: 10px;
				font-size: 22px;
			}

			// >image {
			// 	width: 19px;
			// 	height: 19px;
			// 	margin-left: 10px;
			// }
		}

		/* #endif */



		/* #ifndef H5 */
		.home-search {
			display: flex;
			height: 56rpx;
			background-color: white;
			border-radius: 30rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			align-items: center;
			width: 340rpx;
			margin: 0 10rpx 0 20rpx;
			line-height: 30rpx;
			flex: 1;

			.icon-search {
				color: #ccc;
				font-size: 36rpx;
				margin-top: 6rpx;
			}

			.placeholder {
				font-size: 28rpx;
				color: #ccc;
			}
		}

		.home-scan-box {
			display: flex;
			align-items: center;

			.iconfont {
				color: #FFF;
				margin-left: 20rpx;
				font-size: 44rpx;
			}

		}

		/* #endif */
	}
</style>
